import React, { useState, useEffect } from 'react';
import '../components/All.css'
import '../components/Top.css'
import { Card } from 'antd';
import type { FormProps } from 'antd';
import { Button, Checkbox, Form, Input,Modal } from 'antd';
import Advertisement from '../advertisement/advertisement'
import Headppt from '../Headppt/headppt'
import Portrait from '../Portrait/portrait'
import Topclass from '../Topclass/topclass'
import Enterprise from '../Enterprise/enterprise'
import Toplogin from '../Toplogin/toplogin'
import {getlogin} from '../../request/index'

const Top: React.FC = () => {

  const [isVisible, setIsVisible] = useState(false);
    const [isphoto, setisphoto] = useState(false);
    const [ispic, setispic] = useState(false);
       const [isppt, setisppt] = useState(false);
     const [ispepole, setispepole] = useState(false);
           const [isclass, setisclass] = useState(false);
             const [isprise, setisprise] = useState(false);
           const [isaffair, setisaffair] = useState(false);
                 const [isonline, setisonline] = useState(false);
                  const [ismanys, setismanys] = useState(false);
                   const [isModalOpen, setIsModalOpen] = useState(false);
                   const [showlogin,setlogin]=useState(false)
                   const[imgs,setimgs]=useState('../src/assets/img/admin.png')
                   const [names,setnames]=useState('登录/注册')
           const [form] = Form.useForm();
  const handleMouseEnter = () =>{
   setIsVisible(true);
 
  } 
    const handleMouseLeave = () =>{
    setIsVisible(false)
    
  };

  const photoMouseEnter=()=>{
        setisphoto(true)
  }
const photoMouseLeave=()=>{
 setisphoto(false)
}



const picMouseEnter=()=>{
 setispic(true)
}
  const picMouseLeave = () =>{
    setispic(false)
    
  };



const pptMouseEnter=()=>{
 setisppt(true)
}
  const pptMouseLeave = () =>{
    setisppt(false)
    
  };


const peopleMouseEnter=()=>{
 setispepole(true)
}
  const peopleMouseLeave = () =>{
    setispepole(false)
    
  }


const classMouseEnter=()=>{
 setisclass(true)
}
  const classMouseLeave = () =>{
    setisclass(false)
    
  }



const priseMouseEnter=()=>{
 setisprise(true)
}
  const priseMouseLeave = () =>{
    setisprise(false)
    
  }


  const affairMouseEnter=()=>{
 setisaffair(true)
}
  const affairMouseLeave = () =>{
    setisaffair(false)
    
  }


  const onlineMouseEnter=()=>{
 setisonline(true)
}
  const onlineMouseLeave = () =>{
    setisonline(false)
    
  }

const ismanysMouseEnter=()=>{
 setismanys(true)
}
  const ismanysMouseLeave = () =>{
    setismanys(false)
    
  };



type FieldType = {
  username?: string;
  password?: string;
  remember?: string;
};


// 弹窗的

// 登录打开弹窗的
const gologin=()=>{
  setIsModalOpen(true);
    // const token=localStorage.getItem('token')
    //   if(token){
    //       setIsModalOpen(false)
    //   }
}
  





  const handleOk = () => {
    setIsModalOpen(false);
    form.submit()
      const img=localStorage.getItem('img')
      const name=localStorage.getItem('name')
      setimgs(img)
      setnames(name)
    
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };



    const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
  console.log('Success:', values);
    getlogin(values).then(res=>{
    console.log('登录',res);
   
    if(res.data.code=='200'){
        alert('登录成功')
        localStorage.setItem('token',res.data.token)
        localStorage.setItem('msg',res.data.msg)
        localStorage.setItem('name',res.data.name)
        localStorage.setItem('img',res.data.img)
    }
    
  })


};










  return (

    <div className="top">

      {/* 头左边 */}
      <div className="top_left">
        <img src="https://s.ibaotu.com/next/img/new/btlogo2.9f48.png" alt="" />
      </div>

      {/* 头中间 */}
      <div className="top_nav">
        <ul className='top_nav_ul'>
          <span>
            <li id='vd' onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>视频
              {/* 划过视频的二级菜单 */}
              {isVisible ?
                <div className='video'>
                  <div className='video-hed'>
                    <p><input type="text" placeholder='搜索海量视频模版源文件' /></p>
                    <p className='vip'>全站VIP29元起</p>
                  </div>
                  <div className='video-center'>
                    <p><img src="../src/assets/img/video1.png" alt="" /></p>
                    <p><img src="../src/assets/img/video2.png" alt="" /></p>
                    <p><img src="../src/assets/img/video3.png" alt="" /></p>
                    <p><img src="../src/assets/img/video4.png" alt="" /></p>

                  </div>
                  <div className='video-bom'>
                    <Card title="图文模版" style={{ width: 200, height: 250 }}>
                      <p>红色党政</p>
                      <p>商务科技</p>
                      <p>创意快闪</p>
                      <p>相册照片墙</p>
                      <p>国风水墨</p>
                    </Card>
                    <Card title="图文模版" style={{ width: 200, height: 250 }}>
                      <p>红色党政</p>
                      <p>商务科技</p>
                      <p>创意快闪</p>
                      <p>相册照片墙</p>
                      <p>国风水墨</p>
                    </Card>
                    <Card title="图文模版" style={{ width: 200, height: 250 }}>
                      <p>红色党政</p>
                      <p>商务科技</p>
                      <p>创意快闪</p>
                      <p>相册照片墙</p>
                      <p>国风水墨</p>
                    </Card>
                    <Card title="图文模版" style={{ width: 200, height: 250 }}>
                      <p>红色党政</p>
                      <p>商务科技</p>
                      <p>创意快闪</p>
                      <p>相册照片墙</p>
                      <p>国风水墨</p>
                    </Card>
                  </div>

                </div> : ''}

            </li>
            <li id='line'>|</li>
            <li id='sp'onMouseEnter={photoMouseEnter} onMouseLeave={photoMouseLeave}>实拍
              {/* 划过实拍的二级菜单 */}
                {isphoto ?     <div className='photograph'>
                <div className='photo-hed'>
                  <p>
                    <input type="text" placeholder='搜索海量视频模版源文件'/>
                    <span className='iconfont icon-sousuo'></span>
                  </p>
                </div>
                  <div className='photo-center'>
                   <p><img src="../src/assets/img/video5.png" alt="" /></p>
                    <p><img src="../src/assets/img/video6.png" alt="" /></p>
                     <p><img src="../src/assets/img/video7.png" alt="" /></p>
                  </div>
                    <div className='photo-bom'>
                         <Card title="自然世界" style={{ width: 200, height: 248 }}>
                      <p>壮美山河</p>
                      <p>海边沙滩</p>
                      <p>蓝天白云</p>
                      <p>可爱动物</p>
                      <p>森林树木</p>
                    </Card>
                          <Card title="人文生活" style={{ width: 200, height: 248 }}>
                      <p>壮美山河</p>
                      <p>海边沙滩</p>
                      <p>蓝天白云</p>
                      <p>可爱动物</p>
                      <p>森林树木</p>
                    </Card>
                          <Card title="行业聚焦" style={{ width: 200, height: 248 }}>
                      <p>壮美山河</p>
                      <p>海边沙滩</p>
                      <p>蓝天白云</p>
                      <p>可爱动物</p>
                      <p>森林树木</p>
                    </Card>
                    </div>
              </div>:''}
            </li>
          </span>

          <li id='pic' onMouseEnter={picMouseEnter} onMouseLeave={picMouseLeave}>广告
            {ispic ? <Advertisement></Advertisement>:''}
          
          </li>
          <li id='ppt' onMouseEnter={pptMouseEnter} onMouseLeave={pptMouseLeave}>PPT
          {isppt ? <Headppt/> : ''}
               
          </li>
          <span>
            <li id='sp'>摄像</li>
            <li id='line'>|</li>
            <li id='people' onMouseEnter={peopleMouseEnter} onMouseLeave={peopleMouseLeave}>人像
                  {ispepole ?  <Portrait></Portrait> : ''}
               
            </li>
          </span>
          <li className='source_material'  onMouseEnter={classMouseEnter} onMouseLeave={classMouseLeave}>全部素材
                {isclass ? <Topclass></Topclass> : ''}
               
       
          </li>
          <li id='enterprise' onMouseEnter={priseMouseEnter} onMouseLeave={priseMouseLeave}>企业站
          {isprise ? <Enterprise></Enterprise> : ''}
                  

          </li>
          <li className='affair' onMouseEnter={affairMouseEnter} onMouseLeave={affairMouseLeave}>政务图库
                  {isaffair ?   <div className='affairs'><img src="../src/assets/img/zhengwu.png" alt="" /></div> : ''}
              
          </li>

          <li className='online' onMouseEnter={onlineMouseEnter} onMouseLeave={onlineMouseLeave}>在线设计
            {isonline ? <div className='isonline'>
              <img src="../src/assets/img/zaixian.png" alt="" />
            </div>:''}
          </li>
          <li className='many'  onMouseEnter={ismanysMouseEnter} onMouseLeave={ismanysMouseLeave}>更多工具
                   {ismanys ?    <div className='manys'>
                            <ul>
                                <li>热门活动</li>
                                    <li>精品专题</li>
                                    <li>个性推荐</li>
                            </ul>
                        </div>   : ''}
                  
          </li>
        </ul>

      </div>
      {/* 头右边 */}
      <div className="top_right">
        <div className='spandiv'>
          <span>
            企业VIP授权
          </span>

          <span>
            个人VIP
          </span>

          <p className='cimg'>
            <img src={imgs} alt="" />
            <span onClick={gologin}>{names}</span>
          </p>
               
        </div>
      </div>


                {/* 弹窗 */}
                    <Modal  open={isModalOpen} onOk={handleOk} onCancel={handleCancel} okText='登录' cancelText='取消'>
 
      
        <div className='log'>
            <img src="https://s.ibaotu.com/next/img/new/components/login/img_alert_logo.4a5d.png" alt="" />
           
        </div>
       


        <div className='bomlogin'>
             <Form
    name="basic"
    labelCol={{ span: 8 }}
    wrapperCol={{ span: 16 }}
    style={{ maxWidth: 600 }}
    initialValues={{ remember: true }}
    onFinish={onFinish}
    autoComplete="off"
     form={form}
  >
    <Form.Item<FieldType>
      label="手机号"
      name="username"
      rules={[{ required: true, message: 'Please input your username!' }]}
    >
      <Input style={{width:'300px'}}/>
    </Form.Item>

    <Form.Item<FieldType>
      label="验证码"
      name="password"
      rules={[{ required: true, message: 'Please input your password!' }]}
      
    >
      <Input  style={{width:'100px'}}/>
    </Form.Item>




  </Form>

        </div>

    </Modal>




    </div>



  )
}

export default Top



